<!DOCTYPE html>
<html>
<head>
    <title>Relativity Inertial Frames</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="relativityCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('relativityCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow on a line
        function drawArrowHead(ctx, tox, toy, angle) {
            const headlen = 10; // length of head in pixels
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing Logic ---

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Set styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Define Coordinates ---
        const originX = 100;
        const originY = 300;
        const axisLengthX = 400;
        const axisLengthY = 220;
        
        const oPrimeX = 200;
        const p2X = 350;
        
        // --- S Frame ---
        // y-axis
        ctx.beginPath();
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - axisLengthY);
        ctx.stroke();
        drawArrowHead(ctx, originX, originY - axisLengthY, Math.PI / 2);

        // x-axis (will also serve as x'-axis)
        ctx.beginPath();
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX + axisLengthX, originY);
        ctx.stroke();
        drawArrowHead(ctx, originX + axisLengthX, originY, 0);
        
        // Labels for S frame
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('y', originX - 30, originY - axisLengthY);
        ctx.fillText('x', originX + axisLengthX - 25, originY + 25);

        ctx.font = '24px "Times New Roman"';
        ctx.fillText('O', originX - 20, originY + 20);

        ctx.font = '24px "SimSun", "Times New Roman"';
        ctx.fillText('S系', originX + 40, originY - 180);

        // --- S' Frame ---
        // y'-axis
        ctx.beginPath();
        ctx.moveTo(oPrimeX, originY);
        ctx.lineTo(oPrimeX, originY - axisLengthY);
        ctx.stroke();
        drawArrowHead(ctx, oPrimeX, originY - axisLengthY, Math.PI / 2);
        
        // Labels for S' frame
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText("y'", oPrimeX + 30, originY - axisLengthY);
        ctx.fillText("x'", originX + axisLengthX, originY - 25);

        ctx.font = '24px "Times New Roman"';
        ctx.fillText("O'", oPrimeX, originY + 25);
        
        ctx.font = '24px "SimSun", "Times New Roman"';
        ctx.fillText("S'系", oPrimeX + 70, originY - 150);

        // --- Points P1 and P2 ---
        // Point P1 at O'
        ctx.beginPath();
        ctx.arc(oPrimeX, originY, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('P', oPrimeX, originY - 30);
        ctx.font = '18px "Times New Roman"';
        ctx.fillText('1', oPrimeX + 12, originY - 25);
        
        // Point P2
        ctx.beginPath();
        ctx.arc(p2X, originY, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('P', p2X, originY - 30);
        ctx.font = '18px "Times New Roman"';
        ctx.fillText('2', p2X + 12, originY - 25);

        // Label for P2's initial position: x'_{20} = L_0
        const p2labelX = p2X;
        const p2labelY = originY + 30;
        const subOffsetY = 5;
        const subFont = '16px "Times New Roman"';
        const mainFont = 'italic 22px "Times New Roman"';

        ctx.font = mainFont;
        ctx.fillText("x'", p2labelX - 42, p2labelY);
        ctx.font = subFont;
        ctx.fillText("20", p2labelX - 25, p2labelY + subOffsetY);
        
        ctx.font = '22px "Times New Roman"';
        ctx.fillText("=", p2labelX - 5, p2labelY);
        
        ctx.font = mainFont;
        ctx.fillText("L", p2labelX + 15, p2labelY);
        ctx.font = subFont;
        ctx.fillText("0", p2labelX + 27, p2labelY + subOffsetY);


        // --- Velocity Vector v ---
        const vArrowX_start = 420;
        const vArrowY = 220;
        const vArrowLength = 50;
        ctx.lineWidth = 2; 
        ctx.beginPath();
        ctx.moveTo(vArrowX_start, vArrowY);
        ctx.lineTo(vArrowX_start + vArrowLength, vArrowY);
        ctx.stroke();
        drawArrowHead(ctx, vArrowX_start + vArrowLength, vArrowY, 0);
        
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('v', vArrowX_start + vArrowLength / 2, vArrowY - 25);

    </script>
</body>
</html>